var code = document.getElementById("code");
var account = document.getElementById("account");
var message = document.getElementById("message");
var phone_number = document.getElementById("phone_number");
var number =document.getElementById("number");
var username = document.getElementById("username");
var password =document.getElementById("password");
var checkBox = document.getElementById("checkBox");


code.addEventListener("click", code_function);
account.addEventListener("click", account_function);
message.addEventListener("click", message_function);

function code_function() {
    let login_area01 = document.getElementById("login_area01");
    let login_area02 = document.getElementById("login_area02");
    let login_area03 = document.getElementById("login_area03");
    login_area01.style.display="block";
    code.style.backgroundColor="white"
    code.style.borderTopLeftRadius="15px";
    login_area02.style.display="none";
    account.style.backgroundColor="#babbbc"
    username.value = "";
    password.value= "";
    login_area03.style.display="none";
    message.style.backgroundColor="#babbbc"
    message.style.borderTopRightRadius="15px";
    phone_number.value = "";
    number.value= "";
    checkBox.checked=false;
    code.style.color = "black";
    account.style.color = "#eeeeee";
    message.style.color = "#eeeeee";
}
function account_function() {
    let login_area01 = document.getElementById("login_area01");
    let login_area02 = document.getElementById("login_area02");
    let login_area03 = document.getElementById("login_area03");
    login_area01.style.display="none";
    code.style.backgroundColor="#babbbc"
    code.style.borderTopLeftRadius="15px";
    login_area02.style.display="block";
    account.style.backgroundColor="white"
    login_area03.style.display="none";
    message.style.backgroundColor="#babbbc"
    message.style.borderTopRightRadius="15px";
    phone_number.value = "";
    number.value= "";
    checkBox.checked=false;
    code.style.color = "#eeeeee";
    account.style.color = "black";
    message.style.color = "#eeeeee";
}
function message_function() {
    let login_area01 = document.getElementById("login_area01");
    let login_area02 = document.getElementById("login_area02");
    let login_area03 = document.getElementById("login_area03");
    login_area01.style.display="none";
    code.style.backgroundColor="#babbbc";
    code.style.borderTopLeftRadius="15px";
    login_area02.style.display="none";
    account.style.backgroundColor="#babbbc";
    username.value = "";
    password.value= "";
    login_area03.style.display="block";
    message.style.backgroundColor="white"
    message.style.borderTopRightRadius="15px";
    code.style.color = "#eeeeee";
    account.style.color = "#eeeeee";
    message.style.color = "black"
}

function DownList() {
    var down_list = document.getElementById("down_list");
    var display = window.getComputedStyle(down_list).getPropertyValue('display');

    if (display === "none") {
        down_list.style.display = "block";
    }else{
        down_list.style.display = "none";
    }
}

function DownList01() {
    var student = document.getElementById("student");
    var teacher = document.getElementById("teacher");
    var display = window.getComputedStyle(student).getPropertyValue('display');
    if (display === "none") {
        student.style.display = "block";
        teacher.style.display = "block";
    }else{
        student.style.display = "none";
        teacher.style.display = "none";
    }
}

function DownList03() {
    var student_box = document.getElementById("student_box");
    student_box.style.display = "block";
}

function DownList04() {
    var teacher_box = document.getElementById("teacher_box");
    teacher_box.style.display = "block";
}
function close01(){
    var student_box = document.getElementById("student_box");
    student_box.style.display="none"
}
function close02(){
    var teacher_box = document.getElementById("teacher_box");
    teacher_box.style.display="none"
}
function update_password() {
    var password_update = document.getElementById("password_update");
    var overlay = document.getElementById("overlay");
    password_update.style.display = "block";
    overlay.style.display = "block";
    password_update.style.height = "280px";
    password_update.style.width = "430px";
    password_update.style.left = "870px";
    password_update.style.top = "380px";
}
function update_password_close() {
    var password_update = document.getElementById("password_update");
    var overlay = document.getElementById("overlay");
    password_update.style.display = "none";
    overlay.style.display = "none";
}

function move_box(){
    var password_update = document.getElementById("password_update");
    password_update.addEventListener("mousedown",function (e) {
        var x = e.pageX - password_update.offsetLeft;
        var y = e.pageY - password_update.offsetTop;
        console.log(x);
        console.log(y);
        document.addEventListener('mousemove', move);

        function move(e) {
            password_update.style.cursor = "move";
            password_update.style.left = e.pageX - x + 'px';
            password_update.style.top = e.pageY - y + 'px';
        }

        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', move);
        });
    });
}
function big() {
    var password_update = document.getElementById("password_update");
    password_update.style.width = "100%";
    password_update.style.height = "100%";

}





